<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="./echarts/echarts.js"></script>
  <script src="/echarts/echarts-liquidfill.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script>
  <!-- <script src="/JS/adaptation.js"></script> -->
  <link rel="stylesheet" href="./style/index.css">
  <!-- import Vue before Element -->
  <script src="https://unpkg.com/vue/dist/vue.js"></script>
  <!-- import JavaScript -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <title>學校概況</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      overflow: hidden;
    }

    /* 全局父元素 */
    .container {
      width: 1920px;
      height: 1100px;
      transform-origin: 0% 0%;
      background-image: url(/photo/背景图/BJ1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
    }

    .windo {
      width: 100%;
      height: auto;
      display: flex;
      flex-wrap: nowrap;
      /* transform: scale(1, 1); */
    }

    .top {
      width: 25%;
      height: 10%;
      margin-left: 3%;
      margin-top: 1%;
      line-height: 40px;
    }

    .top span {
      /* font-size: 15px; */
      font-family: cursive;
      color: #fff;
    }

    .top img {
      width: 70%;
      position: relative;
      left: -50px;
      top: -7px;
    }

    .top .img_1 {
      width: 100px;
    }

    /* 剧中logo */
    .top-1 {
      width: 50%;
      text-align: center;

    }

    .top-1 h3 {
      font-size: 40px;
      background-image: -webkit-linear-gradient(bottom, rgb(255, 255, 255), rgba(19, 247, 255, 0.952));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .top-1 img {
      /* width: 120%; */
      width: 100%;
      position: relative;
      top: -17px;
      left: -20px;
    }


    .top-1 .p1 {
      border-top: 1px solid aqua;
      width: 140px;
      position: relative;
      top: -89px;
      right: 200px;
    }

    .top-1 .p2 {
      border-top: 1px solid aqua;
      width: 58px;
      transform: rotate(62deg);
      position: relative;
      top: -65px;
      right: 75px;
    }

    .top-1 .p3 {
      border-top: 1px solid aqua;
      width: 920px;
      position: relative;
      top: -40px;
      left: -32px;
    }

    .top-1 .p4 {
      border-top: 1px solid aqua;
      width: 56px;
      transform: rotate(120deg);
      position: relative;
      top: -66px;
      left: 874px;
    }

    .top-1 .p5 {
      border-top: 1px solid aqua;
      width: 137px;
      position: relative;
      top: -92px;
      left: 915px;
    }

    /* 顶部右侧文字 */
    .top-2 {
      width: 25%;
      height: 30px;
      margin-top: 1%;
      line-height: 40px;
      position: relative;
      right: -56px;
    }

    .top-2 img {
      width: 20px;
    }

    .top-2 .imgg-11 {
      width: 18%;
      position: relative;
      top: 6 px;
    }

    .top-2 span {
      /* font-size: 15px; */
      color: #fff;
    }

    .top-2>.span-1 {
      /* color: cadetblue; */
      position: relative;
      right: 10px;
    }

    .top-1 .immg-11 {
      position: absolute;
      left: 350px;
      width: 60%;
    }

    .windo .right-img {
      width: 23%;
      position: absolute;
      right: 10px;
      top: 60px;
    }

    /* 下方唯一父元素 */
    .div-1 {
      width: 100%;
      display: flex;
    }

    /* 左侧父元素 */
    .left {
      width: 33.3%;
      /* height: 100px; */
      /* background-color: red; */
    }

    /* ul li下的图片 */
    ul li {
      list-style: none;
    }

    .img-left {
      width: 100%;
    }

    .ul-1 li {
      position: relative;
      top: 40px;
      right: -54px;
      padding-bottom: 70px;
    }

    .ul-1 img {
      width: 28px;
    }


    /* 左侧图片拖底 */
    .img-2 {
      width: 62px;
      position: absolute;
      top: 123px;
      left: 35px;
    }

    .img-3 {
      width: 62px;
      position: absolute;
      top: 226px;
      left: 35px;
    }

    .img-4 {
      width: 62px;
      position: absolute;
      top: 328px;
      left: 38px;
    }

    .img-5 {
      width: 62px;
      position: absolute;
      top: 431px;
      left: 37px;
    }

    .img-6 {
      width: 62px;
      position: absolute;
      top: 534px;
      left: 37px;
    }

    .img-7 {
      width: 62px;
      position: absolute;
      top: 634px;
      left: 36px;
    }

    /* 左侧文字 */
    .ul-1 .span-1 {
      position: relative;
      right: -30px;
      top: -10px;
      color: #fff;
      font-size: 20px;
    }

    .span1 {
      color: darkgray;
      position: relative;
      right: -30px;
      top: -10px;
      font-size: 10px;
    }

    .span_1 {
      color: darkgray;
      font-size: 10px;
      position: relative;
      top: 10px;
      right: 27px;
    }

    .span_2 {
      color: darkgray;
      font-size: 10px;
      position: relative;
      top: 10px;
      right: 55px;
    }

    .span_3 {
      color: darkgray;
      font-size: 10px;
      position: relative;
      top: 10px;
      right: 36px;
    }

    .span_4 {
      color: darkgray;
      font-size: 10px;
      position: relative;
      top: 10px;
      right: 26px;
    }

    .span_5 {
      color: darkgray;
      font-size: 10px;
      position: relative;
      top: 10px;
      right: 35px;
    }

    .span_6 {
      color: darkgray;
      font-size: 10px;
      position: relative;
      top: 10px;
      right: 4px;
    }

    /* 中间父元素 */
    .center {
      width: 33.3%;
      /* height: 100px; */
      /* background-color: aqua; */
    }

    /* 中间上半部分 */
    .center-top {
      width: 100%;
      height: 800px;
      /* background-color: saddlebrown; */
      /* border: hidden; */
    }

    .center-top .p-1 {
      border-top: 2px solid #02F1F2;
      width: 245px;
      position: relative;
      top: 710px;
      right: -115px;
      transform: rotate(4deg);
    }

    .center-top .p-2 {
      border-top: 2px solid #02F1F2;
      width: 175px;
      position: relative;
      top: 646px;
      right: -324px;
      transform: rotate(126deg);
    }

    .center-top .p-3 {
      border-top: 2px solid #02F1F2;
      width: 174px;
      position: relative;
      top: 517px;
      right: -310px;
      transform: rotate(40deg);
    }

    .img11 {
      position: relative;
      top: 669px;
      right: -99px;
    }

    .img22 {
      position: relative;
      top: 434px;
      right: -277px;
    }

    .div_2 {
      width: 160px;
      height: 60px;
      border: 1px solid aqua;
      border-radius: 10px;
      color: #868886;
      /* text-indent: 10px; */
      letter-spacing: 3px;
      position: absolute;
      bottom: 335px;
      right: 663px;
      text-align: center;
      line-height: 28px;
      border-image: linear-gradient(to right, #46E9EA, #417FF1) 1 10;
    }

    /* 中间下半部分 */
    .center-bottom {
      width: 100%;
      /* height: 200px; */
      /* background-color: red; */
    }

    .ul-2 li {
      display: inline-block;
      margin-right: -30px;
      margin-top: 60px;
    }

    .ul-2 img {
      width: 70px;
    }

    .ul-2 .span2 {
      color: #BEBFC1;
      position: relative;
      font-size: 18px;
      top: 20px;
      right: 75px;
    }

    /* 右侧父元素 */
    .right {
      width: 33.3%;
      /* height: 100px;
      background-color: cadetblue; */
    }

    /* 控制右侧竖向图标 */
    .right-icon {
      /* width: 100%; */
      position: absolute;
      top: 642px;
      left: 1432px;
    }

    /* 图标圆形圈 */
    #img-cle {
      width: 57px;
      position: absolute;
      top: 4px;
      left: -6px;
    }

    .img-cle-1 {
      width: 57px;
      position: absolute;
      top: 62px;
      left: -6px;
    }

    .img-cle-2 {
      width: 57px;
      position: absolute;
      top: 117px;
      left: -6px;
    }

    .img-cle-3 {
      width: 57px;
      position: absolute;
      top: 175px;
      left: -6px;
    }

    .img-cle-4 {
      width: 57px;
      position: absolute;
      top: 233px;
      left: -6px;
    }



    /* 图标浅色背景 */
    .img-bag {
      width: 49px;
      position: absolute;
      top: 8px;
      left: -2px;
    }

    .img-bag-1 {
      width: 49px;
      position: absolute;
      top: 66px;
      left: -2px;
    }

    .img-bag-2 {
      width: 49px;
      position: absolute;
      top: 121px;
      left: -2px;
    }

    .img-bag-3 {
      width: 49px;
      position: absolute;
      top: 180px;
      left: -2px;
    }

    .img-bag-4 {
      width: 49px;
      position: absolute;
      top: 238px;
      left: -2px;
    }

    /* 图标内圈 */
    .dsa {
      width: 44px;
      position: absolute;
      top: 11px;
      left: -1px;
    }

    .dsa-1 {
      width: 44px;
      position: absolute;
      top: 69px;
      left: -1px;
    }

    .dsa-2 {
      width: 44px;
      position: absolute;
      top: 124px;
      left: -1px;
    }

    .dsa-3 {
      width: 44px;
      position: absolute;
      top: 182px;
      left: -1px;
    }

    .dsa-4 {
      width: 44px;
      position: absolute;
      top: 240px;
      left: -1px;
    }

    /* 图标 */
    .ul-icon .li-img {
      /* padding-bottom: 6px; */
      width: 25px;
      position: absolute;
      top: 20px;
      left: 10px;
    }

    .ul-icon .li-img-1 {
      /* padding-bottom: 6px; */
      width: 25px;
      position: absolute;
      top: 78px;
      left: 10px;
    }

    .ul-icon .li-img-2 {
      /* padding-bottom: 6px; */
      width: 21px;
      position: absolute;
      top: 133px;
      left: 12px;
    }

    .ul-icon .li-img-3 {
      /* padding-bottom: 6px; */
      width: 25px;
      position: absolute;
      top: 192px;
      left: 8px;
    }

    .ul-icon .li-img-4 {
      /* padding-bottom: 6px; */
      width: 25px;
      position: absolute;
      top: 251px;
      left: 10px;
    }

    .img-top {
      width: 57px;
      position: absolute;
      right: 448px;
      top: 114px;
      z-index: 1;
    }

    .img-ground {
      width: 45px;
      position: absolute;
      right: 454px;
      top: 120px;
      z-index: 1;

    }

    .img-click {
      width: 44px;
      position: absolute;
      right: 456px;
      top: 121px;
      z-index: 1;

    }

    .img-time {
      width: 29px;
      position: absolute;
      right: 462px;
      top: 128px;
      z-index: 1;
    }


    .li-112:hover .border1 {
      display: block;
    }

    .li-12:hover .border2 {
      display: block;
    }

    .img-top-1 {
      width: 57px;
      position: absolute;
      right: 448px;
      top: 180px;
      z-index: 1;
    }

    .img-ground-1 {
      width: 45px;
      position: absolute;
      right: 454px;
      top: 186px;
      z-index: 1;

    }

    .img-click-1 {
      width: 44px;
      position: absolute;
      right: 456px;
      top: 187px;
      z-index: 1;

    }

    .img-time-1 {
      width: 29px;
      position: absolute;
      right: 462px;
      top: 195px;
      z-index: 1;

    }

    /* 隐藏border */
    .border1 {
      width: 305px;
      display: none;
      text-align-last: justify;
      padding: 2px;
      padding-left: 30px;
      padding-right: 30px;
      border-radius: 40px 0 0 40px;
      position: absolute;
      top: 120px;
      right: 488px;
      background: -webkit-linear-gradient(left, rgba(82, 108, 103, 0.7), rgba(15, 119, 238, 0.822));
      background: -o-linear-gradient(right, rgba(82, 108, 103, 0.7), rgba(33, 52, 74, 0.8));
      background: -moz-linear-gradient(right, rgba(82, 108, 103, 0.7), rgba(33, 52, 74, 0.8));
      background: linear-gradient(to right, rgba(82, 108, 103, 0.7), rgba(33, 52, 74, 0.8));

    }

    .border2 {
      width: 305px;
      display: none;
      text-align-last: justify;
      padding: 2px;
      padding-left: 30px;
      padding-right: 30px;
      border-radius: 40px 0 0 40px;
      position: absolute;
      top: 186px;
      right: 488px;
      background: -webkit-linear-gradient(left, rgba(82, 108, 103, 0.7), rgba(15, 119, 238, 0.822));
      background: -o-linear-gradient(right, rgba(82, 108, 103, 0.7), rgba(33, 52, 74, 0.8));
      background: -moz-linear-gradient(right, rgba(82, 108, 103, 0.7), rgba(33, 52, 74, 0.8));
      background: linear-gradient(to right, rgba(82, 108, 103, 0.7), rgba(33, 52, 74, 0.8));
    }

    .lunbo {
      width: 50%;
      height: 20%;
      /* background-color: aqua; */
      position: relative;
      right: -280px;
    }

    #app {
      width: 200px;
    }

    .el-carousel__item:nth-child(1n) {

      background: url(./1.png)no-repeat;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      -moz-background-size: 100% 100%;
      -webkit-background-size: 100% 100%;
    }

    .el-carousel__item:nth-child(2n) {

      background-image: url(./2.png);
    }

    .el-carousel__item:nth-child(3n) {
      background-image: url(./3.png);
    }

    .qipao {
      width: 100%;
      /* height: 22%; */
      /* background-color: beige; */
    }

    #qi {
      position: relative;
      top: -20px;
      right: -230px;
    }

    .techer {
      width: 100%;
      height: 30%;
      /* background-color: cadetblue; */
    }

    .techer h4 {
      color: #fff;
      position: relative;
      right: -260px;
      top: -30px;
    }

    .techer img {
      width: 62%;
      position: relative;
      right: -244px;
      top: -35px;
    }

    #techers {
      position: absolute;
      right: 10px;
      top: 510px;
    }

    .xue {
      width: 100%;
      /* height: 25%; */
      /* background-color: darkgray; */
    }

    .xue h4 {
      color: #fff;
      position: relative;
      right: -260px;
      top: -50px;
    }

    .xue img {
      width: 62%;
      position: relative;
      right: -244px;
      top: -57px;
    }

    #xuez {
      position: absolute;
      /* right: 10px;
      top: 510px; */
      right: 10px;
      top: 770px;
    }
    .li_21:hover span{
      display: block;
    }
    .li_21 .li-span{
      display: none;
      color: #fff;
      position: relative;
      right:55px;
    }

    
  </style>
</head>

<body>
  <div id="container" class="container">
    <div class="windo">
      <!-- 导航栏 -->
      <div class="top">
        <img src="/photo/顶部图标/123.png" alt="">
        <img src="./photo/顶部图标/1234.png" alt="" class="img_1">
      </div>
      <div class="top-1">
        <img src="./photo/顶部图标/bg.png" alt="" class="immg-11">
        <h3>数字孪生智慧校园可视化系统</h3>
        <img src="./photo/顶部图标/glow.png" alt="">
        <P class="p1"></P>
        <P class="p2"></P>
        <P class="p3"></P>
        <P class="p4"></P>
        <P class="p5"></P>
      </div>
      <div class="top-2">
        <img src="./photo/顶部图标/administrator.png" alt="" class="imgg-11">

        &nbsp&nbsp&nbsp

        <span class="span-1">11/05/2021</span>
        <span>|</span>
        &nbsp
        <img src="/photo/顶部图标/Noon-click.png" alt="">
        &nbsp
        <span>23°C</span>
        <span>|</span>
        &nbsp
        <span>PM2.5</span>
        <span>|</span>
        &nbsp

        <img src="/photo/顶部图标/quit.png" alt="" class="im">
      </div>
      <img src="./photo/顶部图标/124.png" alt="" class="right-img">
    </div>
    <!-- 总父元素 -->
    <div class="div-1">

      <!-- 左侧 -->
      <div class="left">
        <!-- 左侧图片 -->
        <div class="img-left">
          <ul class="ul-1">
            <li>
              <img src="./photo/左侧图标/面积拷贝.png" alt="">
              <span class="span-1">800</span>
              <span class="span1">亩</span>
              <span class="span_1">占地面积</span>
            </li>
            <li>
              <img src="./photo/左侧图标/建筑物.png" alt="">
              <span class="span-1">18.63</span>
              <span class="span1">万m²</span>
              <span class="span_2">建筑面积</span>
            </li>
            <li>
              <img src="./photo/左侧图标/学生(2)拷贝2.png" alt="">
              <span class="span-1">7514</span>
              <span class="span1">人</span>
              <span class="span_3">学生人数</span>
            </li>
            <li>
              <img src="./photo/左侧图标/学校_教师.png" alt="">
              <span class="span-1">871</span>
              <span class="span1">人</span>
              <span class="span_4">教师人数</span>
            </li>
            <li>
              <img src="./photo/左侧图标/职工.png" alt="">
              <span class="span-1">1520</span>
              <span class="span1">人</span>
              <span class="span_5">职工人数</span>
            </li>
            <li>
              <img src="./photo/左侧图标/书拷贝.png" alt="">
              <span class="span-1">8</span>
              <span class="span1">个</span>
              <span class="span_6">学院数量</span>
            </li>
          </ul>
          <img src="./photo/左侧图标/占地面积.png" alt="" class="img-2">
          <img src="./photo/左侧图标/占地面积.png" alt="" class="img-3">
          <img src="./photo/左侧图标/占地面积.png" alt="" class="img-4">
          <img src="./photo/左侧图标/占地面积.png" alt="" class="img-5">
          <img src="./photo/左侧图标/占地面积.png" alt="" class="img-6">
          <img src="./photo/左侧图标/占地面积.png" alt="" class="img-7">
        </div>
      </div>
      <!-- 中间 -->
      <div class="center">

        <!-- 地图线段 -->
        <div class="center-top">
          <p class="p-1"></p>
          <p class="p-2"></p>
          <p class="p-3"></p>
          <img src="./photo/底部图标/6起点.png" alt="" class="img11">
          <img src="./photo/底部图标/9终点.png" alt="" class="img22">
        </div>
        <!-- 地图解析 -->
        <div class="div_2">
          <span>路径长度:368m</span>
          <p>预计时间:4min</p>
        </div>

        <!-- 底部导航 -->
        <div class="center-bottom">
          <ul class="ul-2">
            <li>
              <img src="./photo/底部图标/学校概况.png" alt="">
              <span class="span2">学校概况</span>
            </li>
            <li><img src="./photo/底部图标/学校概况.png" alt="">
              <span class="span2">教室管理</span>
            </li>
            <li><img src="./photo/底部图标/学校概况.png" alt="">
              <span class="span2">教学管理</span>
            </li>
            <li><img src="./photo/底部图标/学校概况.png" alt="">
              <span class="span2">平安校园</span>
            </li>
            <li><img src="./photo/底部图标/学校概况.png" alt="">
              <span class="span2" style="right: 90px;">教学指挥中心</span>
            </li>
          </ul>
        </div>

      </div>
      <!-- 右侧 -->
      <div class="right">

        <!-- 轮播图 -->
        <div class="lunbo">
          <div id="appe">
            <el-carousel :interval="4000" type="card" height="120px">
              <el-carousel-item v-for="item in 3" :key="item">
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>

        <!-- 气泡 -->
        <div class="qipao">
          <div id="qi" style="width: 600px;height: 240px;"></div>
        </div>

        <!-- 教师统计 -->
        <div class="techer">
          <h4>·&nbsp&nbsp各学院教师统计</h4>
          <img src="./photo/顶部图标/1224.png" alt="">
          <div id="techers" style="width: 375px;height: 260px;"></div>
        </div>

        <!-- 学生统计 -->
        <div class="xue">
          <h4>·&nbsp&nbsp各学院学生统计</h4>
          <img src="./photo/顶部图标/1224.png" alt="">
          <div id="xuez" style="width: 375px;height: 260px;"></div>

        </div>

        <!-- 右侧图标 -->
        <div class="right-icon">
          <!-- 竖向概览图标 -->
          <ul class="ul-icon">
            <li class="li_21">
              <span class="li-span">顶顶顶顶</span>
              <img src="./photo/学校概览/Circle.png" alt="" id="img-cle">
              <img src="./photo/学校概览/Background.png" alt="" class="img-bag">
              <img src="./photo/学校概览/Animation-Click.png" alt="" class="dsa">
              <img src="/photo/学校概览/Park overview.png" alt="" class="li-img">
            </li>
            <li class="li_21">
              <!-- <span class="li-span-1">顶顶顶顶</span> -->
              <img src="./photo/学校概览/Circle.png" alt="" class="img-cle-1">
              <img src="./photo/学校概览/Background.png" alt="" class="img-bag-1">
              <img src="./photo/学校概览/Animation-Click.png" alt="" class="dsa-1">
              <img src="/photo/学校概览/Perspective.png" alt="" class="li-img-1">
            </li>
            <li  class="li_21">
              <!-- <span class="li-span-2">顶顶顶顶</span> -->
              <img src="./photo/学校概览/Circle.png" alt="" class="img-cle-2">
              <img src="./photo/学校概览/Background.png" alt="" class="img-bag-2">
              <img src="./photo/学校概览/Animation-Click.png" alt="" class="dsa-2">
              <img src="/photo/学校概览/First-Perspective.png" alt="" class="li-img-2">
            </li>
            <li  class="li_21">
              <!-- <span class="li-span-3">顶顶顶顶</span> -->
              <img src="./photo/学校概览/Circle.png" alt="" class="img-cle-3">
              <img src="./photo/学校概览/Background.png" alt="" class="img-bag-3">
              <img src="./photo/学校概览/Animation-Click.png" alt="" class="dsa-3">
              <img src="/photo/学校概览/One-click roaming.png" alt="" class="li-img-3">
            </li>
            <li  class="li_21">
              <!-- <span class="li-span-4">顶顶顶顶</span> -->
              <img src="./photo/学校概览/Circle.png" alt="" class="img-cle-4">
              <img src="./photo/学校概览/Background.png" alt="" class="img-bag-4">
              <img src="./photo/学校概览/Animation-Click.png" alt="" class="dsa-4">
              <img src="/photo/学校概览/Route planning.png" alt="" class="li-img-4">
            </li>
          </ul>
        </div>
        <!-- 右侧顶部图标 -->
        <div class="top-icon">
          <ul ul-top>
            <li class="li-112">
              <img src="./photo/天气图标/Circle-click.png" alt="" class="img-top">
              <img src="./photo/天气图标/Background.png" alt="" class="img-ground">
              <img src="./photo/天气图标/Animation-Click.png" alt="" class="img-click">
              <img src="./photo/天气图标/时钟.png" alt="" class="img-time">
              <div class="border1">
                <img src="./photo/天气图标/早上，早晨.png" alt="">
                <img src="/photo/天气图标/晴天.png" alt="">
                <img src="./photo/天气图标/傍晚.png" alt="">
                <img src="./photo/天气图标/晚上-晴.png" alt="">
              </div>
            </li>
            <li class="li-12">
              <img src="./photo/天气图标/Circle-click.png" alt="" class="img-top-1">
              <img src="./photo/天气图标/Background.png" alt="" class="img-ground-1">
              <img src="./photo/天气图标/Animation-Click.png" alt="" class="img-click-1">
              <img src="./photo/天气图标/云.png" alt="" class="img-time-1">
              <div class="border2">
                <img src="./photo/天气图标/晴天.png" alt="">
                <img src="/photo/天气图标/雨天，下雨，天气.png" alt="">
                <img src="./photo/天气图标/小雪.png" alt="">
                <img src="./photo/天气图标/傍晚.png" alt="">
              </div>
            </li>
            <li></li>
          </ul>
        </div>
      </div>
    </div>

  </div>
  <script>
    new Vue({
      el: '#appe',
      data: function () {
        return { visible: false }
      }
    })
  </script>
</body>
<!-- 气泡 -->
<script src="./echarts/Bubble.js"></script>
<!-- 教师柱状图 -->
<script src="./echarts/techers.js"></script>
<!-- 学生柱状图 -->
<script src="./echarts/school.js"></script>
<script>
  self();
  function self() {
    var Browser = parseInt(window.innerWidth);
    console.log("B" + Browser)
    var InitWith = $('.container').css('width');
    InitWith = parseInt(InitWith.substring(0, InitWith.length));
    console.log("I" + InitWith)
    var Scaling = Browser / InitWith;
    var Scale = document.getElementById('container');
    Scale.style.transform = 'scale(' + Scaling + ')'
    console.log(Scaling)
  }
  window.onresize = function () {
    self();
  };
</script>


</html>